
let path = require("path");
let webpack = require("webpack");
let HtmlWebpackPlugin = require("html-webpack-plugin");
let HotModuleReplacementPlugin = require('webpack/lib/HotModuleReplacementPlugin');

module.exports = {
    mode: "development",
    entry:[
        path.resolve('./webpack-dev-server/client/index.js'),
        path.resolve('./webpack/hot/dev-server.js'),
        './src/index.js'
    ],
    devtool:false,
    output: {
        filename: "[name].js",
        path: path.resolve(__dirname, "dist"),
        hotUpdateGlobal:'webpackHotUpdate' //修改hot-update.json的self内部名字
    },

    /* 
        热更新总体流程
        1.启动一个HTTP服务器，会打包我们的项目，并且让我们可以预览我们的产出的文件，默认端口号8080
        2.还会启动一个websocket双向通信服务器，如果有新的模块发生变更的话，会通过消息的方式通知客户端，让客户端拉取最新代码，并且进行客户端的热更新 
    */
    devServer:{
        hot:true, //支持热更新
        port:9000,
        contentBase:path.join(__dirname,'static')
    },
    plugins: [
        new HtmlWebpackPlugin({
            template:'./public/index.html'
        }),
        new HotModuleReplacementPlugin() //此处可写可不写，因为如果devServer.hot==true的话，webpack会自动帮你添加此插件
    ]
    /* 
    webpack\lib\HotModuleReplacementPlugin.js
    它会生成两个补丁文件
    1.上一次编译生成的[name].hash.hot-update.json,说明从上次编译到现在哪些代码块发生成改变
    2.chunk名字.上一次编译生成的[name].hash.hot-update.js,存放着此代码块最新的模块定义,里面会调用webpackHotUpdate方法
    向代码块中注入HMR runtime代码,热更新的主要逻辑,比如拉取代码、执行代码、执行accept回调都是它注入的到chunk中的
    hotCreateRequire会帮我们给模块 module的parents、children赋值 
    */
}